<template>
    <div>
        <el-card class="box-card mb-3" shadow="never">
            <div slot="header" class="clearfix">
                <span>内容列表</span>
            </div>
            <div v-for="(article,index) in value" class="grid grid-cols-12 my-2">
                <div class="col-span-5 flex justify-center items-center">
                    <div>
                        <label for="图片">图片</label>
                        <hd-image v-model="article.image"></hd-image>
                    </div>
                </div>
                <div class="col-span-5 flex-grow justify-center items-center w-full">
                    <div>
                        <label for="标题">标题</label>
                        <el-input v-model="article.title" placeholder="请输入标题"></el-input>
                    </div>
                    <div>
                        <label for="内容">内容</label>
                        <el-input v-model="article.introduce" placeholder="请输入内容" rows="5"
                                  type="textarea"></el-input>
                    </div>
                </div>
                <div class="col-span-2 flex justify-center items-center">
                    <i class="el-icon-error text-2xl cursor-pointer text-gray-400 hover:text-red-500"
                       @click="del(article)"
                    ></i>
                </div>
            </div>
            <div class="flex mt-3">
                <el-button type="success" @click="add">
                    <i class="el-icon-plus"></i> 添加
                </el-button>
            </div>
        </el-card>

    </div>
</template>

<script>
export default {
    props: ['value'],
    computed: {
        action() {
            return '/api/upload/local'
        },
        headers() {
            return {
                Authorization: `Bearer ${window.localStorage.getItem('token')}`,
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = res.path
            this.$emit('input', this.imageUrl)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jfif'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        del(article) {
            this.$confirm(`abbdd确定删除【${article.title}】吗？`, '温馨提示').then(() => {
                this.value.splice(this.value.indexOf(article), 1)
            })
        },
        add() {
            this.value.push({image: "", content: '', title: ''})
        }
    },
}
</script>

<style scoped>
.avatar-uploader-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
}
</style>
